<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一、认识vue-cli：快速搭建项目结构，提高开发效率 -->

    <!-- 二、vue-cli的使用环境 -->
    <!-- 1.node和npm -->
    <!-- 2.webpack -->

    <!-- 三、vue-cli的使用步骤 -->
    <!-- 1.全局安装：npm i -g @vue/cli
        注意：这里安装的是脚手架3的版本，不能够使用脚手架2的方式初始化项目，
        如果想要使用脚手架2的方式初始化项目的话，就必须拉取脚手架2的模板，
        这样就既可以使用脚手架2，也可以使用脚手架3
    -->
    <!-- 2.安装vue-cli3和vue-cli2的桥接工具：npm i -g @vue/cli-init -->

    <!-- 3.创建项目
        vue-cli2: vue init webpack 项目名称（不要用中文）
        vue-cli3: vue create 项目名称（不要用中文）
    
    -->


    <!-- 四、使用vue-cli2创建项目 -->
    <!-- 1.初始化项目：vue init webpack 项目名称（不要用中文） -->
    <!-- 2.项目目录结构解析
        build：webpack相关配置
              build.js:生产环境构建
              check-versions.js：版本检查（node/npm）
              utils.js:样式相关的配置文件
              vue-loader.conf.js：css加载配置器
              webpack.base.conf.js：webpack基础配置
              webpack.dev.conf.js：webpack开发配置
              webpack.prod.conf.js：webpack生产配置
        config:vue的基础配置文件（配置监听端口，打包输出等）
              dev.env.js：项目开发的环境配置
              index.js：项目主要配置（修改端口号，打包路径）
              prod.env.js：项目生产环境配置
        node_modules:项目相关的依赖模块
        src:项目源代码
            assets:存放静态资源（logo和icon图）
            components:公共组件
            App.vue:根组件
            main.js:入口文件
        static:静态资源（图片、css\js代码）
        .babelrc:babel编译参数（es代码相关转化配置）
        .editorconfig：代码格式的项目配置
        .gitignore：上传git仓库需要忽略的文件配置
        index.html:主页，一般之定义一个空的根节点，在main.js里面定义的实例将挂载到根节点里面，
        内容通过vue组件填充
        package-lock.json：项目依赖的模块的具体版本号
        package.json:项目的基本信息
        README.md：项目的说明文档
    -->
    <!-- 3.运行项目
        （1）进入项目文件夹
        （2）
    
    -->

    <!-- 五、runtime-compiler 和 runtime-only的区别 -->
    <!-- 
        1.runtime-compiler:代码中，可以有template
        vue程序运行过程：template(模版)=>解析为ast(抽象语法书)=>编译为rander（渲染函数）=>渲染virtual Dom(虚拟DOM) =>更新UI


        runtime-only：代码中，不能有template
        vue程序运行过程：编译为rander（渲染函数）=>渲染virtual Dom(虚拟DOM) =>更新UI

        总结：
        （1）runtime-only的性能更高
        （2）runtime-only的代码更少
        （3）runtime-only比runtime-compiler更轻6KB

        2.在runtime-only模式中，App.vue里面依然有template,但是代码依然可以解析，
        是因为有vue-template-compiler模块，这个模块在处理vue文件的时候，
        会把template直接编译成对象，然后进行render渲染，因此在runtime-only模式构建的项目中，
        也可以使用template。
        所以，后面再创建项目的时候，就可以直接选择runtime-only模式。
      
     -->

     <!-- 六、认识vue-cli3 
        vue-cli 3 与 2 版本有很大区别:
            vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
            vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
            vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
            移除了static文件夹，新增了public文件夹，并且index.html移动到public中
    -->

    <!-- 七、创建vue-cli3项目的步骤 -->
    <!-- 1.初始化项目：vue create 项目名称 -->
    <!-- 2.运行项目：
        （1）进入项目文件夹
        （2）启动项目：npm run serve
    
    -->

    <!-- 八、如何修改vue-cli3创建的项目的配置 -->
    <!-- 方法一：vue ui (vue项目管理可视化工具)
        1.启动本地服务：vue ui（任意目录下面都可以）
        2.在浏览器中自动弹出一个页面：vue项目管理器
    -->
    <!-- 方法二：vue-cli3项目的配置都隐藏在了node_modules文件夹中 -->
    <!-- 地址：node_modules => @vue => cli-service => webpack.config.js -->

    <!-- 方法三：在vue.config.js文件里面进行配置 -->






</body>
</html>